<template>
    <div>
        <Row  data-scroll-reveal class="result">
            <div class="post about-me">
                <div class="post-header">
                    <h1 class="post-title">关于我</h1>
                </div>
                <div class="avator clearContent">
                    <Avatar icon="person" class="avater" :src="meSrc" clearContent/>
                    <ul class="message clearContent">
                        <li><span>文章数：</span><span>{{message.article_len}}</span></li>
                        <li><span>评论数：</span><span>{{message.discuss_len}}</span></li>
                        <li><span>访问量：</span><span>{{message.visit_len}}</span></li>
                    </ul>
                </div>
                <div class="conditionMe">
                    一个90后刚入行的爱文艺站长，喜欢画画，旅行。
                    <span>籍贯：湖南常德</span>
                    <span>邮箱：zhoutian@zhituanbox.com</span>
                </div>
            </div>
        </Row>

        <!--最新文章-->
        <Row class="result">
            <div class="post about-me">
                <div class="post-header">
                    <h1 class="post-title">所有标签</h1>
                </div>
                <div class="avator clearContent anany">
                    <ul class="clearfix">
                        <li v-for="item in code" @click="renderArticle(item)"><a href="javascript:void(0)">{{item.type_name}}</a></li>
                    </ul>
                </div>
            </div>
        </Row>



        <!--排行榜-->
       <Row  class="result" data-scroll-reveal style="margin-top: 20px;">
            <div class="post about-me">
                <div class="post-header">
                    <h1 class="post-title">Top排行</h1>
                </div>
                <div class="avator clearContent topcontent">
                    <ul>
                        <li v-for="item in article" @click="renferArticle(item)">
                            <b>{{item.title}}</b>
                            <p class="avaterMessaage">
                                <i><a><img :src="meSrc" :alt="item.title"></a></i>
                                <span class="describeavater">{{item.subtitle}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </Row>
    </div>
</template>
<style>
    .anany li{
        float: left;
        padding: 1px 10px;
        border: 1px solid #ccc;
        margin: 10px;
    }
    .anany li a{
        color: black;
    }
</style>
<script>
    export default{
        name: 'rightComponent',
        props: ['row', 'result'],
        data(){
            return {
                meSrc: '/static/image/me.jpg',
                message:{},
                code:{},
                article:{},
            }
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init(){
                let target = this;
                this.fetch({
                    url: '/getRight',
                    method: 'GET',
                    params: {}
                }).then(function (response) {
                    if(response.data.ret==1){
                        target.message['article_len']=response.data.rows['article_len'];
                        target.message['visit_len']=response.data.rows['visit_len'];
                        target.message['discuss_len']=response.data.rows['discuss_len'];
                        target.code  = response.data.rows['category'];
                        target.article  = response.data.rows['article'];

                    }
                })
            },
            renderArticle(item){
                this.$router.push({path:'/article?id='+item.id});
            },
            renferArticle(item){
                this.$router.push({path:'/article?id='+item.id});
            }
        }
    }
</script>